<template>
  <div>



    <el-button type="success" @click="downloadFile('报告：周报.xlsx')">周报下载</el-button>
    <el-button type="success" @click="downloadFile('报告：月报.xlsx')">月报下载</el-button>
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="true">
      <el-form-item label="报告名称" prop="mainName">
        <el-input
          v-model="queryParams.mainName"
          placeholder="报告名称"
          clearable
        />
      </el-form-item>

      <el-form-item label="开始时间" prop="beginTime">
        <el-date-picker
          v-model="queryParams.beginTime"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间" prop="finishTime">
        <el-date-picker
          v-model="queryParams.finishTime"
          type="date"
          placeholder="选择日期">
        </el-date-picker>

      </el-form-item>
      <el-form-item label="报告生成时间" prop="createTime">
        <el-date-picker
          v-model="queryParams.createTime"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="状态" prop="reportState">

        <el-radio v-model="queryParams.reportState" label="1">严重</el-radio>
        <el-radio v-model="queryParams.reportState" label="2">良好</el-radio>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table
      border
      :data="tableData"
      style="width: 100%"
      :row-class-name="tableRowClassName">

      <el-table-column
        prop="mainName"
        label="报告名称"
        width="180">

      </el-table-column>
      <el-table-column
        prop="beginTime"
        label="周报开始时间">
      </el-table-column>

      <el-table-column
        prop="finishTime"
        label="周报结束时间">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="报告生成时间">
      </el-table-column>

      <el-table-column
        prop="reportPath"
        label="报告路径">
      </el-table-column>
      <el-table-column
        prop="reportType"
        label="报告类型">
      </el-table-column>

      <el-table-column
        prop="reportState"
        label="报告状态">
      </el-table-column>
    </el-table>


  </div>
</template>

<script>  window._interceptConfig = {
  collection: true, //整体开关
  click: true, //页面点击事件信息采集开关
  page: true, //页面跳转加载事件信息采集开关
  error: true, //异常信息采集开关
  http: true, //通讯信息采集开关
  name: "jyzdhywxxxtsdfx_n_prd.mart-ui-ds", //系统编号，被采集信息的系统名称。前端简称
  url: " http://apm.sd.sgcc.com.cn:19411/api/v2/spansWeb"//数据上报服务地址，根据实际情况输入
};
</script>
<!-- src -->
<script src=" http://25.41.37.249:19411/assets/js/intercept.min.js " async></script>
<script>
  import {queryMainReport} from "@/api/diagmanage/mainreport"
  export default {
    methods: {
      handleQuery(){
        this.getList();
      },
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      downloadFile(fileName) {
        let a = document.createElement("a");
        a.href = "/"+ fileName;
        a.download = fileName;
        a.click();
      },


      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
      getList(){

        queryMainReport(this.queryParams).then(res=>{
          this.tableData=res.data
          //console.log(res.data)
          for (let item in this.tableData) {
            let i  = this.tableData[item]
            if (i.reportState === '2') {
              i.reportState='良好'
            }else {
              i.reportState='严重'
            }
          }
          // console.log(res.data)

        })
      },
      handleExport() {
        this.download('MainReportController/export', {
          ...this.queryParams
        }, `巡检报告-${new Date().getTime()}.xlsx`)
      }


    },
    data() {
      return {
        queryParams:{
          mainName:"",
          beginTime:"",
          finishTime:"",
          createTime:"",
          reportPath:"",
          reportState:""
        },
        tableData: []
      }
    },
    created(){
      this.getList()
    }






  }
</script>

<style scoped>

  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>
